<template>
  <div>
    <div id="search-options">
        <el-form size="small" :inline="true">
          <el-form-item label="value是否必填：">
            <el-select v-model="searchForm.isNeed" clearable>
                <el-option value="yes" label="是"></el-option>
                <el-option value="no" label="否"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" id="query-btn" plain icon="el-icon-search" type="primary" @click="searchData">查询</el-button>
          </el-form-item>
        </el-form>
    </div>
      <div style="margin-left:20px;margin-right:20px;">
          <el-table id="data-table" :data="paramList" style="width: 100%" border :highlight-current-row="true" stripe>
              <el-table-column prop="key" label="key" align="center"></el-table-column>
              <el-table-column prop="value" label="value" align="center"></el-table-column>
              <el-table-column prop="desc" label="描述说明" align="center"></el-table-column>
              <el-table-column prop="isNeedName" label="是否必须填value" align="center"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" align="center">
                  <template slot-scope="scope">
                      <span>{{ scope.row.createTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
                  </template>
              </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" align="center">
                  <template slot-scope="scope">
                      <span>{{ scope.row.updateTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
                  </template>
              </el-table-column>
              <el-table-column label="操作" width="170px" align="center">
                  <template slot-scope="scope">
                      <el-tooltip  effect="dark" content="编辑" placement="bottom-end">
                      <el-button size="small" plain  class="el-icon-edit"  type="primary" @click="openSaveDialog(scope.row)"></el-button>
                      </el-tooltip>
                  </template>
              </el-table-column>
          </el-table>
      </div>
      <div class="pagination">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="searchForm.page.pageNum" :page-sizes="[10]" :page-size="10" :total="common.page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>

       <el-dialog :close-on-click-modal="false" title="修改" :visible.sync="dialogFormVisible" :center="true" v-el-drag-dialog @dragDialog="handleDrag">
        <el-form :model="updateParamForm">
          <el-form-item v-if="updateParamForm.key" label="key：" label-width="120px">
            <span style="width:20%;">&nbsp;</span>
            <span>{{updateParamForm.key}}</span>
          </el-form-item>
          <el-form-item label="描述说明：" label-width="120px">
            <span style="width:20%;">&nbsp;</span>
            <el-input :autosize="{ minRows: 3, maxRows: 3}" type="textarea" style="width:80%;" v-model="updateParamForm.desc" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item  label="value：" label-width="120px">
            <span style="width:20%;">&nbsp;</span>
            <el-input style="width:80%;" v-model="updateParamForm.value" autocomplete="off" clearable></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" plain class="el-icon-close" type="info" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="small" plain class="el-icon-check" type="primary" @click="saveData">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

export default {
  components: {
  },
  name: 'elDragDialog',
  directives: { elDragDialog },
  data () {
    return {
        paramList: [{
            key: '',
            value: '',
            desc: '',
            createTime: '',
            updateTime: '',
            isNeed: '',
            isNeedName: ''
        }],
        searchForm: {
            isRich: 'no',
            isNeed: '',
            page: {
                pageNum: 1,
                pageSize: 10
            }
        },
        dialogFormVisible: false,
        updateParamForm: {
            key: '',
            value: '',
            desc: '',
            isRich: ''
        },
    }
  },
  methods: {
      handleDrag() {
      },
      handleSizeChange (pageSize) {
        this.searchForm.page.pageSize = pageSize
        this.loadData()
      },
      handleCurrentChange (pageNum) {
        this.searchForm.page.pageNum = pageNum
        this.loadData()
      },
      loadData () {
          let vm = this
          vm.$http.post('api/param/find',vm.searchForm).then(res => {
            if (res.data.code === 0){
              vm.paramList = res.data.data.records
              vm.common.page.total = res.data.data.total
            }
            else {
              vm.$message.error(res.data.msg)
            }
          })
      },
      searchData () {
          let vm = this
          vm.loadData()
      },
      resetForm () {
        let vm = this
        vm.updateParamForm = {
            key: '',
            value: '',
            desc: '',
            isRich: ''
        }
      },
      findDetail (key) {
        let vm = this
        vm.$http.get('api/param/findOne?key=' + key).then(res => {
            if (res.data.code === 0){
             vm.updateParamForm = res.data.data
            }
            else {
             vm.$message.error(res.data.msg)
            }
        })
      },
      openSaveDialog (row) {
        let vm = this
        vm.resetForm()
        vm.findDetail(row.key)
        vm.dialogFormVisible = true
      },
      saveData () {
          let vm = this
          vm.$http.post('api/param/updateParam',vm.updateParamForm).then(res => {
            if (res.data.code === 0){
                vm.$message({
                    message: '保存系统设置成功',
                    type: 'success'
                })
                vm.dialogFormVisible = false
                vm.loadData()
            }
            else {
              vm.$message.error(res.data.msg)
            }
          })
      }
  },
  mounted() {
    let vm = this
    vm.loadData()
  }
}
</script>
